import React, { PureComponent } from 'react'
import { connect } from 'dva';
import { Row, Col, Input, Button } from 'antd';
import List from './components/List'
import Modal from './components/Modal'
const { Search } = Input;

class Index extends PureComponent {
    getSearch = () => {
        const { dispatch } = this.props
        const name = this.refs.roleName.input.state.value.replace(/\s*/g, "")
        if (name === '') {
            this.refs.list.props.getTable()
        } else {
            dispatch({
                type: 'role/getSearch',
                action: name
            })
        }

    }
    get tableProps() {
        const { dataSource, columns, current, totalPage, visible } = this.props.role
        const { dispatch } = this.props

        return {
            dataSource,
            columns,
            current,
            totalPage,
            getTable: current => {
                dispatch({
                    type: 'role/getDataSource',
                    payload: {
                        data: { currPage: current || 1 },
                        method: 'GET'
                    }
                })
            },
            editDataSource: id => {
                dispatch({
                    type: 'role/editDataSource',
                    action: id
                })
            },
            showModal: row => {
                dispatch({
                    type: 'role/showModal',
                    action: {
                        visible: visible,
                        id: row.id
                    }
                })
            }
        }
    }

    get modalProps() {
        const { modal, visible, confirmLoading } = this.props.role
        const treeData = this.props.menu.dataSource
        const { dispatch } = this.props

        return {
            modal,
            visible,
            treeData,
            confirmLoading,
            showModal: () => {
                dispatch({
                    type: 'role/showModal',
                    action: {
                        visible: visible
                    }
                })
            },
            handleOk: data => {
                dispatch({
                    type: 'role/handleOk',
                    action: data
                })
            },
            getMenuTree: () => {
                dispatch({
                    type: 'menu/getDataSource',
                    payload: {
                        data: { t: new Date().getTime() },
                        method: 'GET'
                    }
                })
            }
        }
    }

    render() {
        const { visible } = this.props.role

        const { dispatch } = this.props

        return (
            <div>
                <Row gutter={36} style={{ marginBottom: 30 }}>
                    <Col xs={24} sm={12} md={8} xl={4}>
                        <Search
                            placeholder="名称"
                            ref="roleName"
                            onSearch={this.getSearch}
                            style={{ width: 200 }}
                        />
                    </Col>
                    <Col xs={24} sm={12} md={16} xl={20}>
                        <Row type='flex' justify='space-between'>
                            <div>
                                <Button type='primary' style={{ marginRight: 20 }} onClick={this.getSearch}>搜索</Button>
                            </div>
                            <Button onClick={() => {
                                dispatch({
                                    type: 'role/showModal',
                                    action: {
                                        visible: visible
                                    }
                                })
                            }}>新增</Button>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col xs={24} sm={24} md={24} xl={24}>
                        <List  ref='list' {...this.tableProps} />
                    </Col>
                </Row>
                {visible ? <Modal {...this.modalProps} /> : ''}
            </div>
        )
    }
}
const mapStateToProps = state => {
    return {
        role: state.role,
        menu: state.menu
    }
}
export default connect(mapStateToProps)(Index)